<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="700px"
    :before-close="handleClose"
  >
    <div class="relationship-manager">
      <!-- 当前关系列表 -->
      <div class="current-relations">
        <h3>当前关联项 ({{ currentRelations.length }})</h3>
        <div v-if="currentRelations.length === 0" class="empty-state">
          <el-empty description="暂无关联项" :image-size="80" />
        </div>
        <div v-else class="relations-list">
          <div 
            v-for="item in currentRelations" 
            :key="item[itemKey]"
            class="relation-item"
          >
            <div class="item-info">
              <span class="item-label">{{ item[itemLabel] }}</span>
              <el-tag v-if="item.status" size="small" :type="getStatusType(item.status)">
                {{ getStatusText(item.status) }}
              </el-tag>
            </div>
            <el-button 
              size="small" 
              type="danger" 
              @click="removeRelation(item[itemKey])"
            >
              移除
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 可添加的项目列表 -->
      <div class="available-items">
        <h3>可添加项 ({{ filteredAvailableItems.length }})</h3>
        
        <!-- 搜索框 -->
        <div class="search-box">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索可添加的项目..."
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
        
        <div v-if="filteredAvailableItems.length === 0" class="empty-state">
          <el-empty description="暂无可添加项" :image-size="80" />
        </div>
        <div v-else class="available-list">
          <div 
            v-for="item in paginatedItems" 
            :key="item[itemKey]"
            class="available-item"
          >
            <div class="item-info">
              <span class="item-label">{{ item[itemLabel] }}</span>
              <el-tag v-if="item.status" size="small" :type="getStatusType(item.status)">
                {{ getStatusText(item.status) }}
              </el-tag>
              <span v-if="item.description" class="item-description">
                {{ item.description }}
              </span>
            </div>
            <el-button 
              size="small" 
              type="primary" 
              @click="addRelation(item[itemKey])"
            >
              添加
            </el-button>
          </div>
          
          <!-- 分页 -->
          <div v-if="totalPages > 1" class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="pageSize"
              :total="filteredAvailableItems.length"
              layout="prev, pager, next"
              small
            />
          </div>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch, defineProps, defineEmits } from 'vue'
import { Search } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '关系管理'
  },
  currentRelations: {
    type: Array,
    default: () => []
  },
  availableItems: {
    type: Array,
    default: () => []
  },
  itemKey: {
    type: String,
    default: 'id'
  },
  itemLabel: {
    type: String,
    default: 'name'
  }
})

// Events
const emit = defineEmits([
  'update:visible',
  'add-relation',
  'remove-relation'
])

// 响应式数据
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 过滤后的可用项目
const filteredAvailableItems = computed(() => {
  if (!searchKeyword.value) {
    return props.availableItems
  }
  
  const keyword = searchKeyword.value.toLowerCase()
  return props.availableItems.filter(item => {
    const label = item[props.itemLabel]?.toLowerCase() || ''
    const description = item.description?.toLowerCase() || ''
    return label.includes(keyword) || description.includes(keyword)
  })
})

// 分页后的项目
const paginatedItems = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredAvailableItems.value.slice(start, end)
})

// 总页数
const totalPages = computed(() => {
  return Math.ceil(filteredAvailableItems.value.length / pageSize.value)
})

// 监听搜索关键词变化，重置页码
watch(searchKeyword, () => {
  currentPage.value = 1
})

// 监听对话框显示状态，重置搜索和分页
watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      searchKeyword.value = ''
      currentPage.value = 1
    }
  }
)

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    'active': 'success',
    'inactive': 'info',
    'published': 'success',
    'draft': 'warning',
    'disabled': 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'active': '启用',
    'inactive': '禁用',
    'published': '已发布',
    'draft': '草稿',
    'disabled': '已禁用'
  }
  return statusMap[status] || status
}

// 添加关系
const addRelation = (itemId) => {
  emit('add-relation', itemId)
}

// 移除关系
const removeRelation = (itemId) => {
  emit('remove-relation', itemId)
}

// 处理关闭
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.relationship-manager {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 70vh;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.current-relations,
.available-items {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.8) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.current-relations h3,
.available-items h3 {
  margin: 0 0 20px 0;
  color: #1a202c;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) 1;
  padding-bottom: 12px;
}

.search-box {
  margin-bottom: 20px;
}

.search-box :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.relations-list,
.available-list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 8px;
}

.relation-item,
.available-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.relation-item:hover,
.available-item:hover {
  transform: translateY(-2px);
  border-color: rgba(102, 126, 234, 0.5);
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
}

.relation-item:last-child,
.available-item:last-child {
  margin-bottom: 0;
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.item-label {
  font-weight: 600;
  color: #1a202c;
  font-size: 15px;
  line-height: 1.4;
}

.item-description {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin-top: 4px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
  font-size: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 250, 252, 0.6) 100%);
  border-radius: 12px;
  border: 2px dashed rgba(102, 126, 234, 0.3);
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.dialog-footer .el-button {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dialog-footer .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 按钮样式 */
:deep(.el-button) {
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.el-button:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.el-button--success) {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
}

:deep(.el-button--danger) {
  background: linear-gradient(135deg, #f56c6c 0%, #ff8a8a 100%);
  border: none;
}

/* 标签样式 */
:deep(.el-tag) {
  border-radius: 8px;
  font-weight: 500;
  padding: 4px 12px;
  border: none;
}

:deep(.el-tag--success) {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
}

:deep(.el-tag--warning) {
  background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
}

:deep(.el-tag--danger) {
  background: linear-gradient(135deg, #f56c6c 0%, #ff8a8a 100%);
}

:deep(.el-tag--info) {
  background: linear-gradient(135deg, #909399 0%, #b1b3b8 100%);
}

/* 分页样式 */
:deep(.el-pagination) {
  background: transparent;
}

:deep(.el-pagination .el-pager li) {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  margin: 0 2px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

:deep(.el-pagination .el-pager li.is-active) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* 滚动条样式 */
.relations-list::-webkit-scrollbar,
.available-list::-webkit-scrollbar {
  width: 8px;
}

.relations-list::-webkit-scrollbar-track,
.available-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
}

.relations-list::-webkit-scrollbar-thumb,
.available-list::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
}

.relations-list::-webkit-scrollbar-thumb:hover,
.available-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}
</style>